<template>
  <view class="component-container">
    <view class="left" @click="openRiderTakingOrderSetter">
      <uni-icons type="tune" size="20"></uni-icons>
      <span class="left-button-text" :class="{ 'right-active': isRightButtonActive }">接单设置</span>
    </view>

    <view class="right" :class="{ 'right-button-active': isRightButtonActive }" @click="clickRightButton">
      <view class="right-button-content">
        <template v-if="isRightButtonActive">
          <slot name="right-active-icon" size="20"></slot>
          <view class="right-button-text">
            <slot name="right-active-text"></slot>
          </view>
        </template>
        <template v-else>
          <slot name="right-un-active-icon" size="20">
            <uni-icons type="refreshempty" size="20"></uni-icons>
          </slot>
          <view class="right-button-text">
            <slot name="right-un-active-text">刷新列表</slot>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import $store from '@/store'
import { ref } from 'vue'
const props = defineProps({
  isRightButtonActive: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits<{
  (e: 'update:isRightButtonActive', newValue: boolean): void
  (e: 'activeClick'): void
  (e: 'unActiveClick'): void
}>()
function clickRightButton() {
  if (props.isRightButtonActive) {
    emits('activeClick')
  } else {
    emits('unActiveClick')
  }
}
function openRiderTakingOrderSetter() {
  $store.user.openOrderTakingSettingsEvent.emit()
}
</script>

<style scoped lang="scss">
.component-container {
  $component-height: 55px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 25rpx;
  width: 100%;
  height: $component-height;
  border-top: 1px solid #e9e9e9;
  background-color: #fff;
  box-sizing: border-box;

  .left {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 30rpx;
    white-space: nowrap;
    flex-direction: column;

    .left-button-text {
      font-size: 21rpx;
    }
  }

  .right {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
    border: 1.5px solid #dfdfdf;
    border-radius: 18rpx;
    flex-grow: 1;
    box-sizing: border-box;

    .right-button-content {
      display: flex;
      align-items: center;

      .right-button-text {
        display: inline-block;
        margin-left: 10rpx;
      }
    }
  }

  .right-button-active {
    border: none;
    background-color: #fedd02;
  }
}
</style>
